<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  div{
    display: flex;
    width: 800px;
    height: 200px;
    background-color: #7d857a;
  }
  div span{
    margin: 0 5px;
    width: 100px;
    height: 100px;
    background-color: #3ba844;
  }

  div span:nth-child(2){
    /*默认是0 ，-1比0小所以在前面*/
    order: -1;
  }
  div span:nth-child(3){
    /* align-self 控制子项自己在侧轴上的排列方式 */
    /* align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。*/
    /* 默认值为 auto，表示继承父元素的 align-items属性，如果没有父元素,则等同于stretch。*/
    align-self: flex-end;
  }
</style>
<body>
    <div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </div>

</body>
</html>